<template>
  <div class="demo">
    <div class="demo-title">后缀图标</div>
    <div class="demo-content">
      <Space direction="vertical" style="width: 100%">
        <TreeSelect
          v-model:value="value"
          show-search
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          tree-default-expand-all
          :tree-data="treeData"
          :field-names="{
            children: 'children',
            value: 'value',
            label: 'title',
          }"
          tree-node-filter-prop="title"
        >
          <template #suffixIcon><SmileOutlined /></template>
        </TreeSelect>
        <TreeSelect
          v-model:value="value1"
          show-search
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          multiple
          show-arrow
          tree-default-expand-all
          :tree-data="treeData"
          :field-names="{
            children: 'children',
            value: 'value',
            label: 'title',
          }"
          tree-node-filter-prop="title"
        >
          <template #suffixIcon><SmileOutlined /></template>
        </TreeSelect>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import Space from '@sscd/space';
  import TreeSelect from '@sscd/tree-select';
  import type { TreeSelectProps } from '@sscd/tree-select';
  const value = ref<string>();
  watch(
    () => value,
    () => console.log('select', value.value)
  );
  const value1 = ref<string[]>([]);
  const treeData = ref<TreeSelectProps['treeData']>([
    {
      title: 'parent 1',
      value: 'parent 1',
      children: [
        {
          title: 'parent 1-0',
          value: 'parent 1-0',
          children: [
            { title: 'my leaf', value: 'leaf1' },
            { title: 'your leaf', value: 'leaf2' },
          ],
        },
        { title: 'ssc', value: 'ssc' },
      ],
    },
  ]);
</script>
